#app {

    .main-container {
        transition: margin-left .28s;
        margin-left: 220px;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .sidebar-container {
        transition: width 0.28s;
        width: 220px !important;
        height: 100%;
        position: fixed;
        font-size: 0px;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow: hidden;
        border-right: 1px solid  rgba(0,0,0, 0.05);

        // reset element-ui css
        .horizontal-collapse-transition {
            transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
        }

        .scrollbar-wrapper {
            overflow-x: hidden !important;
        }

        .el-scrollbar__bar.is-vertical {
            right: 0px;
        }

        .el-scrollbar {
            height: 100%;
        }

        &.has-logo {
            .el-scrollbar {
                height: calc(100% - 50px);
            }
        }

        .is-horizontal {
            display: none;
        }

        a {
            display: inline-block;
            width: 100%;
            overflow: hidden;
        }

        .svg-icon {
            margin-right: 16px;
        }

        .sub-el-icon {
            margin-right: 12px;
            margin-left: -2px;
        }

        .el-menu {
            border: none;
            height: 100%;
            width: 100% !important;
        }


        & .nest-menu .el-submenu>.el-submenu__title,
        & .el-submenu .el-menu-item {
            min-width: 220px !important;


        }

        .hideSidebar {
            .sidebar-container {
                width: 54px !important;
            }

            .main-container {
                margin-left: 54px;
            }

            .submenu-title-noDropdown {
                padding: 0 !important;
                position: relative;

                .el-tooltip {
                    padding: 0 !important;

                    .svg-icon {
                        margin-left: 20px;
                    }

                    .sub-el-icon {
                        margin-left: 19px;
                    }
                }
            }

            .el-submenu {
                overflow: hidden;

                &>.el-submenu__title {
                    padding: 0 !important;

                    .svg-icon {
                        margin-left: 20px;
                    }

                    .sub-el-icon {
                        margin-left: 19px;
                    }

                    .el-submenu__icon-arrow {
                        display: none;
                    }
                }
            }

            .el-menu--collapse {
                .el-submenu {
                    &>.el-submenu__title {
                        &>span {
                            height: 0;
                            width: 0;
                            overflow: hidden;
                            visibility: hidden;
                            display: inline-block;
                        }
                    }
                }
            }
        }

        .el-menu--collapse .el-menu .el-submenu {
            min-width: 220px !important;
        }

        // mobile responsive
        .mobile {
            .main-container {
                margin-left: 0px;
            }

            .sidebar-container {
                transition: transform .28s;
                width: 220px !important;
            }

            &.hideSidebar {
                .sidebar-container {
                    pointer-events: none;
                    transition-duration: 0.3s;
                    transform: translate3d(-220px, 0, 0);
                }
            }
        }

        .withoutAnimation {

            .main-container,
            .sidebar-container {
                transition: none;
            }
        }
    }

    .el-menu--vertical {
        &>.el-menu {
            .svg-icon {
                margin-right: 16px;
            }

            .sub-el-icon {
                margin-right: 12px;
                margin-left: -2px;
            }
        }

        >.el-menu--popup {
            max-height: 100vh;
            overflow-y: auto;

            &::-webkit-scrollbar-track-piece {
                background: #d3dce6;
            }

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background: #99a9bf;
                border-radius: 20px;
            }
        }
    }
}